<script setup lang="ts">
import useDashboardStore from '@/store/dashboard/dashboard'
import * as echarts from 'echarts'
import { storeToRefs } from 'pinia'
import { onMounted, ref, watchEffect } from 'vue'

const pieRef = ref<HTMLElement>()
const dashboardStore = useDashboardStore()
const { categoryCountDate } = storeToRefs(dashboardStore)

onMounted(() => {
  const myChart = echarts.init(pieRef.value!)

  watchEffect(() =>
    myChart.setOption({
      color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],

      legend: {},
      radar: [
        {
          indicator: [
            { text: 'Indicator1' },
            { text: 'Indicator2' },
            { text: 'Indicator3' },
            { text: 'Indicator4' },
            { text: 'Indicator5' }
          ],
          center: ['25%', '50%'],
          radius: 120,
          startAngle: 90,
          splitNumber: 4,
          shape: 'circle',
          axisName: {
            formatter: '【{value}】',
            color: '#428BD4'
          },
          splitArea: {
            areaStyle: {
              color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(211, 253, 250, 0.8)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(211, 253, 250, 0.8)'
            }
          }
        },
        {
          indicator: [
            { text: 'Indicator1', max: 150 },
            { text: 'Indicator2', max: 150 },
            { text: 'Indicator3', max: 150 },
            { text: 'Indicator4', max: 120 },
            { text: 'Indicator5', max: 108 },
            { text: 'Indicator6', max: 72 }
          ],
          center: ['75%', '50%'],
          radius: 120,
          axisName: {
            color: '#fff',
            backgroundColor: '#666',
            borderRadius: 3,
            padding: [3, 5]
          }
        }
      ],
      series: [
        {
          type: 'radar',
          emphasis: {
            lineStyle: {
              width: 4
            }
          },
          data: [
            {
              value: [100, 8, 0.4, -80, 2000],
              name: 'Data A'
            },
            {
              value: [60, 5, 0.3, -100, 1500],
              name: 'Data B',
              areaStyle: {
                color: 'rgba(255, 228, 52, 0.6)'
              }
            }
          ]
        },
        {
          type: 'radar',
          radarIndex: 1,
          data: [
            {
              value: [120, 118, 130, 100, 99, 70],
              name: 'Data C',
              symbol: 'rect',
              symbolSize: 12,
              lineStyle: {
                type: 'dashed'
              },
              label: {
                show: true,
                formatter: function (params: any) {
                  return params.value
                }
              }
            },
            {
              value: [100, 93, 50, 90, 70, 60],
              name: 'Data D',
              areaStyle: {
                color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                  {
                    color: 'rgba(255, 145, 124, 0.1)',
                    offset: 0
                  },
                  {
                    color: 'rgba(255, 145, 124, 0.9)',
                    offset: 1
                  }
                ])
              }
            }
          ]
        }
      ]
    })
  )

  window.addEventListener('resize', () => {
    myChart.resize()
  })
})
</script>

<template>
  <div class="piechart">
    <div class="header">
      <h2 class="title">分类商品数量(玫瑰图)</h2>
    </div>
    <div class="content" ref="pieRef"></div>
  </div>
</template>

<style lang="less" scoped>
.piechart {
  height: 453px;
  background-color: #fff;
  border-radius: 4px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
  padding: 10px 20px;
  border-bottom: 1px solid #e4e7ed;
  box-sizing: border-box;
  .title {
    font-size: 18px;
    font-weight: 400;
  }
}
.content {
  padding: 20px;
  height: 350px;
}
</style>
